<template>
	<view class="text-tools">
		<u-form :model="textStyle" labelPosition="top">
			<u-form-item label="文本内容">
				<u-input v-model="textContent" placeholder="请输入文本内容"></u-input>
			</u-form-item>
			
			<u-form-item label="字体大小">
				<u-number-box 
					v-model="textStyle.fontSize" 
					:min="12" 
					:max="72"
					integer>
				</u-number-box>
			</u-form-item>
			
			<u-form-item label="字体颜色">
				<u-color-picker v-model="textStyle.color"></u-color-picker>
			</u-form-item>
			
			<u-form-item label="字体粗细">
				<u-radio-group 
					v-model="textStyle.fontWeight" 
					placement="row">
					<u-radio 
						v-for="item in fontWeightOptions" 
						:key="item.value" 
						:label="item.label" 
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="对齐方式">
				<u-radio-group 
					v-model="textStyle.textAlign" 
					placement="row">
					<u-radio 
						v-for="item in alignOptions" 
						:key="item.value" 
						:label="item.label" 
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-button type="primary" @click="addTextElement">添加文本</u-button>
		</u-form>
		
		<view class="preview-box">
			<text :style="{
				fontSize: textStyle.fontSize + 'px',
				color: textStyle.color,
				fontWeight: textStyle.fontWeight,
				textAlign: textStyle.textAlign
			}">
				预览文本样式
			</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			textContent: '',
			textStyle: {
				fontSize: 16,
				color: '#000000',
				fontWeight: 'normal',
				textAlign: 'left'
			},
			fontWeightOptions: [
				{ label: '正常', value: 'normal' },
				{ label: '加粗', value: 'bold' }
			],
			alignOptions: [
				{ label: '左对齐', value: 'left' },
				{ label: '居中', value: 'center' },
				{ label: '右对齐', value: 'right' }
			]
		}
	},
	methods: {
		addTextElement() {
			if (!this.textContent.trim()) {
				uni.showToast({
					title: '请输入文本内容',
					icon: 'none'
				})
				return
			}
			
			const newElement = {
				type: 'text',
				content: this.textContent,
				style: {
					...this.textStyle,
					left: 100,
					top: 100,
					width: 200,
					height: 50
				}
			}
			
			this.$emit('addElement', newElement)
			this.textContent = ''
		}
	}
}
</script>

<style lang="scss" scoped>
.text-tools {
	padding: 20rpx;
	
	.preview-box {
		margin-top: 40rpx;
		padding: 20rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		text-align: center;
	}
}
</style>